<template>
    <div class="login">
        <div class="login-header">
            <button @click="login" v-if="$store.state.login" class="login-or-register" style="color: rgb(53, 199, 222);">登录</button>
            <div v-else 
                 @mouseenter="showLogoutDropdown = true" 
                 @mouseleave="showLogoutDropdown = false">
                <img :src="$store.state.userInfo.avatarUrl" alt="">
                <span>{{ $store.state.userInfo.nickname }}</span>
                <div v-if="showLogoutDropdown" class="logout-dropdown">
                    <button @click="goToProfile">个人中心</button>
                    <button @click="loginOut">退出</button>
                </div>
            </div>
            <a-modal 
                v-model="visible" 
                :title="null" 
                @ok="handleOk" 
                :width="360" 
                style="height: 308px"
                :footer="null"
            >
                <div class="login-title">普通登录</div>
                <div class="login-form">
                    <div class="input-item">
                        <input 
                            type="text" 
                            v-model="username" 
                            placeholder="请输入账户名"
                            class="login-input"
                        >
                    </div>
                    <div class="input-item">
                        <input 
                            type="password" 
                            v-model="password" 
                            placeholder="请输入密码"
                            class="login-input"
                        >
                    </div>
                </div>
                <button class="login-btn" @click="handleOk">登录</button>
                <div class="login-links">
                    <a href="#" class="forget-pwd">忘记密码?</a>
                    <a href="#" class="register" style="float: right;">立即注册!</a>
                </div>
            </a-modal>
        </div>
    </div>
</template>

<script>
import { getLogin } from '../api/request'
export default {
    data() {
        return {
            visible: false,
            username: '',
            password: '',
            show: true,
            showLogoutDropdown: false
        }
    },
    methods: {
        login() {
            this.visible = true;
        },
        handleOk() {
            getLogin(this.username, this.password).then(res => {
                if(res.code == 0){
                    this.visible = false;
                    this.$store.commit("setUserInfo", res.userInfo)
                    this.$store.commit("setLogin", false)
                    this.show = false;
                } else {
                    alert('用户不存在/密码错误');
                }
            }).catch(() => {
                alert('用户不存在/密码错误');
            });
        },
        loginOut(){
            this.$store.commit("setLogin", true)
            this.$store.commit("setUserInfo", {})
            this.showLogoutDropdown = false;
        },
        goToProfile() {
            this.$router.push({ name: 'localView' });
            this.showLogoutDropdown = false;
        }
    }
}
</script>

<style>
.login-title {
    font-size: 14px;
    text-align: center;
    margin-bottom: 20px;
    color: #00cf8c;
    border-bottom: 2px solid #00cf8c;
    line-height: 46px;
}

.login-form {
    margin-top: 10px;
}

.input-item {
    margin-bottom: 15px;
}

.login-input {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    font-size: 14px;
}

.login-input::placeholder {
    color: #999;
}

.login-btn {
    width: 100%;
    height: 30px;
    color: #fff;
    background-color: #00cf8c;
    border-color: #00cf8c;
    border: none;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

.login-btn:hover {
    background-color: #23db9b;
}

.login-links {
    margin-top: 15px;
    font-size: 12px;
}

.login-links a {
    color: #999;
    text-decoration: none;
    font-size: 14px;
}

.login-links a:hover {
    color: #00cf8c;
}

.login-header {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
}

.login-or-register {
    width: 94px;
    height: 30px;
    background: #fff;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);
    border-radius: 15px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
    border: 0;
    cursor: pointer;
}

.login-header > div:not(.logout-dropdown) {
    width: 94px;
    height: 30px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

.login-header img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 4px;
}

.login-header span {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}

.logout-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    z-index: 1000;
}

.logout-dropdown button {
    padding: 5px 12px;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.logout-dropdown button:hover {
    background-color: #f5f5f5;
}
</style>